<!--树 多选框-->
<template>
  <el-dropdown ref="baseTreeMultipleDrop" trigger="click" @click.native="stop">
    <el-input v-model="label" :disabled="disabled" :placeholder="placeholder" />
    <el-dropdown-menu
      slot="dropdown"
      class="base-tree-multiple"
      :disabled="disabled"
    >
      <el-tree
        ref="baseTreeMultiple"
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="{ children: 'children', label: 'name' }"
        :check-strictly="isCheck"
      >
        <template v-slot="{ node, data }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <el-popover
            v-if="data.tableData !== null && data.tableData.length !== 0"
            ref="popover"
            placement="right"
            width="100%"
            trigger="hover"
            @show="popoverShow(data.tableData)"
          >
            <div>
              <el-table
                ref="table"
                :data="data.tableData"
                style="width: 100%"
                border
                :show-header="false"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="name" width="180"> </el-table-column>
              </el-table>
            </div>
            <i slot="reference" class="el-icon-arrow-right"></i>
          </el-popover>
        </template>
      </el-tree>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "BaseTreeRelevance",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      label: "",
      isCheck: false,
      treeIdList: [],
      tableDataIdList: [],
      choiceData: [],
      userName: [],
      valList: [],
    };
  },
  watch: {
    value: function() {
      for (let i = 0; i < this.value.length; i++) {
        this.treeIdList.push(this.value[i].parentId);
        this.tableDataIdList.push(this.value[i].id);
      }
      this.setDefaultNode();
    },
  },
  methods: {
    popoverShow(tableData) {
      this.$refs.baseTreeMultipleDrop.$data.visible =
        this.$refs.popover.$data.showPopper;

      if (this.tableDataIdList !== null && this.tableDataIdList.length !== 0) {
        for (let i = 0; i < tableData.length; i++) {
          for (let o = 0; o < this.tableDataIdList.length; o++) {
            if (tableData[i].id === this.tableDataIdList[o]) {
              this.$nextTick(function() {
                this.$refs.table.toggleRowSelection(tableData[i], true);
              });
            }
          }
        }
      }
    },
    handleSelectionChange(val) {
      this.choiceData = val;
      if (this.valList == null) {
        this.valList = [];
      }

      for (let i = 0; i < this.choiceData.length; i++) {
        this.userName.push(this.choiceData[i].name);
        this.valList.push({
          parentId: this.choiceData[i].parentId,
          id: this.choiceData[i].id,
        });
      }
      this.userName = [...new Set(this.userName)];
      this.label = this.userName.join(",");
      this.$emit("input", this.valList);
    },
    stop() {
      if (this.disabled) {
        this.$refs.baseTreeMultipleDrop.hide();
      }
    },
    setDefaultNode() {
      this.isCheck = true;
      if (!this.treeIdList.length) {
        this.label = "";
      }
      this.$refs.baseTreeMultiple.setCheckedKeys(this.treeIdList);
      this.$nextTick(() => {
        this.isCheck = false;
        this.$refs.baseTreeMultiple.getCheckedNodes();
      });
    },
  },
};
</script>

<style lang="scss">
.base-tree-multiple {
  width: 210px;
  max-height: 500px;
  overflow: auto;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
